<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>紫色鹭</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/zTreeStyle.css">
    <link rel="stylesheet" href="../css/select2.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div id="header_01_html">
    <iframe id="header_01" src="head_01.html" frameborder="0"></iframe>
</div>
<div id="head_search_html">
    <iframe id="head_search" src="head_search.html" frameborder="0"></iframe>
</div>
<div class="container store_product clearfix">
    <div class="store_tab">
        <a href="store_info.html">基本信息</a>
        <a href="store_banner.html">轮播管理</a>
        <a class="active">商品管理</a>
        <a href="store_manage.html">订单管理</a>
        <!--<a href="store_evaluate.html">评价管理</a>-->
    </div>
    <div class="right">
        <div class="add">
            <div class="title">
                新增商品
                <div class="button" onclick="history.go(-1)">返回</div>
            </div>
            <table>
                <tr>
                    <td><i class="c_red">* </i>商品名称：</td>
                    <td><input type="text" id="name" :value="info.name"></td>
                </tr>
                <tr>
                    <td><i class="c_red">* </i>商品类型：</td>
                    <td>
                        <input type="text" id="proClass" readonly="" placeholder="选择类型" style="padding-left:5px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;
                 -webkit-box-orient:vertical;" autocomplete="off" class="layui-input" lay-verify="required"
                               :value="info.commodityType">
                        <ul id="classBox" class="ztree"
                            style="height:300px;width: 239px; overflow: auto;display: none;position: absolute;z-index: 999;background:white;">
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td><i class="c_red">* </i>单价：</td>
                    <td>
                        <input type="text" placeholder="￥" id="price" :value="info.price">
                    </td>
                </tr>
                <tr>
                    <td><i class="c_red">* </i>商品原价：</td>
                    <td>
                        <input type="text" placeholder="￥" id="originalPrice" :value="info.originalPrice">
                    </td>
                </tr>
                <tr>
                    <td><i class="c_red">*</i> 型号：</td>
                    <td>
                        <input type="text" placeholder="" id="origin" :value="info.origin">
                    </td>
                </tr>
                <!--<tr>-->
                <!--<td>商品产地：</td>-->
                <!--<td>-->
                <!--<input type="text">-->
                <!--</td>-->
                <!--</tr>-->
                <tr>
                    <td><i class="c_red">* </i>所属品牌：</td>
                    <td>
                        <select name="" id="brandBox" class="wid220">
                            <option value="">请选择</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><i class="c_red">* </i>商品图片：</td>
                    <td>
                        <div class="file">
                            <div class="layui-upload">
                                <button type="button" class="layui-btn upload_btn" id="businessLicensePicUrl"></button>
                            </div>
                        </div>
                        <div class="upload_img" v-for="item in info.picUrl" :picurl="item">
                            <i class="icon_delete"></i>
                            <img :src="imgBaseUrl + item" alt="">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td><i class="c_red">* </i>内容：</td>
                    <td><textarea id="demo" style="display: none;" :value="info.content"></textarea></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <div class="submit" @click="toSubmit">发布</div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
<div class="tabRight">
    <div class="first">
        <ul>
            <li><a target="_blank" class="icon_admin_white" title=""></a></li>
            <li>
                <a target="_blank" class="go-shopcard c-fff">
                    <i class="icon_shopcar_white"></i>
                    <p class="mt10">购<br>物<br>车</p>
                    <span class="car-num pos-Sty1">0</span>
                </a>
            </li>
            <li>
                <a target="_blank" class="icon_list_white mt10 go-myorder" title="订单"></a>
                <a target="_blank" class="icon_collect_white mt10 go-myhas" title="收藏"></a>
                <a target="_blank" class="icon_history_white mt10 go-record" title="记录"></a>
            </li>
        </ul>
    </div>
    <div class="second">
        <a target="_blank" class="icon_edit_white"></a>
        <a target="_blank" class="icon_top_white mt10"></a>
    </div>
</div>
<script src="../js/config.js"></script>
<script src="../js/select2.full.js"></script>

<script>
    var id = getUrlParam("id");
    if (id) {
        $(".store_product .right .add .title").text("编辑商品");
    }
    getAllClass();
    var layedit;
    var edit;

    get_ajax("/sys/origin/getAllNewPage", {}, function (data) {
        data.forEach(function (item) {
            item.text = item.name;
        })
        $("#brandBox").select2({
            data: data,
            placeholder: '请选择',
            allowClear: true
        })
    })

    var app = new Vue({
        el: '.container',
        data: {
            info: "",
            imgBaseUrl: imgBaseUrl,
        },
        beforeCreate: function () {
            var that = this;
            if (id) {
                get_ajax("/sys/storeCommodity/view", {id: id}, function (data) {
                    data.picUrl = data.picUrl.split(",");
                    that.info = data;
                    console.log(data)
                    $("#brandBox").val(data.originId).trigger("change");
                    ;
                })
            }
        },
        updated: function () {

        },
        methods: {
            toSubmit: function () {
                var originId = $("#brandBox").val();
                var name = $("#name").val();
                var price = $("#price").val();
                var originalPrice = $("#originalPrice").val();
                var origin = $("#origin").val();
                var picUrl = [];
                $(".upload_img").each(function () {
                    picUrl.push($(this).attr("picurl"));
                });
                var content = layedit.getContent(edit);
                var commodityType = $("#proClass").val();
                var url = id?'/sys/storeCommodity/edit':'/sys/storeCommodity/add';
                var sendData = {
                    name: name,
                    price: price,
                    originalPrice: originalPrice,
                    origin: origin,
                    originId: originId,
                    commodityType: commodityType,
                    picUrl: picUrl.toString(),
                    content: content
                }
                id?sendData['id']=id:'';
                for (var item in sendData) {
                    if (!sendData[item]) {
                        layer.msg('请完善数据')
                        return
                    }
                }
                get_ajax(url, sendData, function (data) {
                    get_confirm(function () {
                        history.go(-1);
                    })
                })

            },
        },
        updated: function () {
            layui.use('layedit', function () {
                layedit = layui.layedit;
                layedit.set({
                    uploadImage: {
                        url: baseUrl + '/file/layeditUplode?token=' + Token,
                        type: "post"
                    }
                });
                edit = layedit.build('demo');
            })
        }
    })

    var loading;

    //图片上传
    layui.use(['upload'], function () {
        var $ = layui.jquery, upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '.upload_btn'
            ,multiple:true
            , url: baseUrl + '/file/upload?token=' + Token
            , before: function (obj) {
                loading = layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });
            }
            , done: function (res, index) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg.msg('上传失败');
                } else {
                    var data = res.data;
                    var str = '<div class="upload_img" picUrl="' + data.address + '" picId="' + data.id + '">' +
                        '<i class="icon_delete"></i><img src="' + imgBaseUrl + data.address
                        + '" alt=""></div>'
                    this.item.parents(".file").after(str);
                    layer.close(loading);
                }

            }
            , error: function () {

            }
        });
    })

    $("body").on("click", ".store_product .right .add table td .icon_delete", function () {
        $(this).parent().remove();
    })
    var layedit;
    var edit;
    layui.use('layedit', function () {
        layedit = layui.layedit;
        layedit.set({
            uploadImage: {
                url: baseUrl + '/file/layeditUplode?token=' + Token,
                type: "post"
            }
        });
        edit = layedit.build('demo');
    })
</script>
</body>
</html>